<div class="sub-nav">
    <ul>
        <li ng-class="{selected : $parent.subNav1 === 0}"><a href="" ng-click="$parent.subNav1 = 0">Overview</a></li>
        <li ng-class="{selected : $parent.subNav1 === 1}"><a href="" ng-click="$parent.subNav1 = 1">Settings</a></li>
        <li ng-class="{selected : $parent.subNav1 === 2}"><a href="" ng-click="$parent.subNav1 = 2">Memory</a></li>
    </ul>
</div>

<div class="sub-nav-content-container">
    <div ng-show="$parent.subNav1 === 0">

        <h2>Access</h2>

        <table class="table-content-block">
            <tr>
                <td class="td-label">Hostname:</td>
                <td><span class="on-badge"></span></td>
                <td>maverix.local<br>
                    <span class="nfo">
                        Here you'll find Access Information to this Server over the Internet.
                    </span>
                </td>
                <td class="td-actions">
                    <button>Edit ...</button>
                </td>
            </tr>

            <tr>
                <td class="td-label">Computername:</td>
                <td><span class="on-badge"></span></td>
                <td>maverix<br>
                    <span class="nfo">
                        Your Server is reachable under this address in the local network. <a href=""><span
                            class="entypo-right maverix-circle"></span></a>
                    </span>
                </td>
                <td class="td-actions">
                    <button>Edit ...</button>
                </td>
            </tr>

        </table>


        <h2>Server</h2>
        <table class="table-content-block">
            <tr>
                <td class="td-label">Active for:</td>
                <td>25 Days, 3 Hours, 49 Minutes</td>
            </tr>
            <tr>
                <td class="td-label">Theme:</td>
                <td>Maverix Bootstrap (Version 1.0.0)</td>
            </tr>

            <tr>
                <td class="td-label">Author:</td>
                <td>Bijan Rahnema <a href="mailto:b.rahnema@gmail.com">b.rahnema@gmail.com</a></td>
            </tr>

        </table>

        <h2>Networks</h2>
        <table class="table-content-block">
            <tr>
                <td class="td-label">Wrapbootstrap:</td>
                <td>Maverix Theme</td>
            </tr>

        </table>

    </div>


    <div ng-show="$parent.subNav1 === 1">
        <h2>Settings</h2>

        <ul class="list-unstyled indent">
            <li>
                <input type="checkbox"> Allow Remote Access via SSH for
                <select>
                    <option>Administrators</option>
                    <option>All Users</option>
                </select>
            </li>
            <li>
                <input type="checkbox"> Activate Screen Sharing and Remote Access
            </li>
            <li>
                <input type="checkbox"> Allow Remote Administration through Server
            </li>
            <li>
                <input type="checkbox"> Allow Push Notifications
            </li>
        </ul>

    </div>

    <div ng-show="$parent.subNav1 === 2">
        <div class="row">
            <div class="col-md-12">
                <h2>Memory Usage</h2>
                <div class="demo-container">
                    <div id="placeholder" class="demo-placeholder" style="width: 600px; height: 300px;"></div>
                </div>
            </div>
        </div>

        <script>




                // We use an inline data source in the example, usually data would
                // be fetched from a server

                var data = [],
                        totalPoints = 300;

                function getRandomData() {

                    if (data.length > 0)
                        data = data.slice(1);

                    // Do a random walk

                    while (data.length < totalPoints) {

                        var prev = data.length > 0 ? data[data.length - 1] : 50,
                                y = prev + Math.random() * 10 - 5;

                        if (y < 0) {
                            y = 0;
                        } else if (y > 100) {
                            y = 100;
                        }

                        data.push(y);
                    }

                    // Zip the generated y values with the x values

                    var res = [];
                    for (var i = 0; i < data.length; ++i) {
                        res.push([i, data[i]])
                    }

                    return res;
                }

                // Set up the control widget

                var updateInterval = 24;

                var plot = $.plot("#placeholder", [ getRandomData() ], {
                    series: {
                        shadowSize: 0,	// Drawing is faster without shadows
                        color: "#77B1DE"
                    },
                    yaxis: {
                        min: 0,
                        max: 100
                    },
                    xaxis: {
                        show: false
                    },
                    grid: {
                        backgroundColor: "#F5F5F5",
                        borderWidth: 1,
                        borderColor: "#E0E0E0"
                    }
                });

                function update() {

                    plot.setData([getRandomData()]);

                    // Since the axes don't change, we don't need to call plot.setupGrid()

                    plot.draw();
                    clearTimeout(update);
                    setTimeout(update, updateInterval);
                }

               update();
        </script>



            <p class="indent">Maverix Theme is integrated with the awesome <a href="http://www.flotcharts.org" target="_blank">Flot Charts</a> Library. <a class="btn btn-help" href="https://github.com/flot/flot/blob/master/API.md" target="_blank"><span class="entypo-help"></span></a></p>





    </div>
</div>

